<template>
  <div id="Interestpayment">
    <div class="query">
      <!-- --------------- -->
      <div class="homeTitle admin">
        <span>付息计划表</span>
      </div>
      <div class="queryCon">
        <div class="qSeles">
          <!-- 两个选择 -->
          <div class="xuanze">
            <div class="xuanzeCon">
              <span>债券代码：</span>
              <el-input v-model="data.code" disabled size="small"></el-input>
            </div>
            <div class="xuanzeCon">
              <span>债券全称：</span>
              <el-input v-model="data.name" disabled size="small"></el-input>
            </div>
            <div class="xuanzeCon">
              <span>债券简称：</span>
              <el-input v-model="data.simple" disabled size="small"></el-input>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnAb">
            <el-button type="primary" size="small" @click="xinzeng">添加付息计划</el-button>
            <el-button type="primary" size="small" @click="gobondDetail">返回</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- ------------------------------------------------------ -->
      <div class="table">
        <table class="xbl">
          <tr>
            <td>支付标识</td>
            <td>计息开始日</td>
            <td>付息日</td>
            <td>支付日</td>
            <td>预计利率(%)</td>
            <td>本金总量(元)</td>
            <td>本金支付量(元)</td>
            <td>应付利息额(元)</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="index">
            <td v-if="index === currentIndex"><el-input v-model="item.payIdentifying" placeholder="请输入" size="small"></el-input></td>
            <td v-else>{{item.payIdentifying}} </td>
            <td v-if="index === currentIndex"> <el-date-picker v-model="item.startDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker> </td>
            <td v-else>{{item.startDate | dateformat}}</td>
            <td v-if="index === currentIndex"> <el-date-picker v-model="item.paymentDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker> </td>
            <td v-else>{{item.paymentDate | dateformat}}</td>
            <td v-if="index === currentIndex"> <el-date-picker v-model="item.payDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker> </td>
            <td v-else>{{item.payDate | dateformat}}</td>
            <td v-if="index === currentIndex"><el-input v-model="item.rate" placeholder="请输入" size="small"></el-input></td>
            <td v-else>{{item.rate}}</td>
            <td v-if="index === currentIndex"><el-input v-model="item.amount" placeholder="请输入" size="small"></el-input></td>
            <td v-else>{{item.amount}}</td>
            <td v-if="index === currentIndex"><el-input v-model="item.payAmount" placeholder="请输入" size="small"></el-input></td>
            <td v-else>{{item.payAmount}}</td>
            <td v-if="index === currentIndex"><el-input v-model="item.rateAmount" placeholder="请输入" size="small"></el-input></td>
            <td v-else>{{item.rateAmount}}</td>
            <td>
              <el-button  size='small' @click="xiu(index, item)" v-if="index === currentIndex">提交</el-button>
              <el-button  size='small' @click="xiugai(index, item)" v-else>修改</el-button>
              <el-button  size='small' @click="cancel(index, item)" v-if="index === currentIndex">取消</el-button>
              <el-button size="mini" @click="del(index, item)" v-else>删除</el-button>
            </td>
          </tr>
          <tr v-if="tableData == 0">
            <td colspan="9">暂无添加数据</td>
          </tr>
        </table>
      </div>
    </div>
    <el-dialog title="添加付息计划" :visible.sync="dialogVisible" center width="50%">
      <table class="dialogTable">
        <tr>
          <td>支付标识</td>
          <td>
            <el-input v-model="dialogTable.payIdentifying" placeholder="请输入" size="small"></el-input>
          </td>
        </tr>
        <tr>
          <td>计息开始日</td>
          <td>
            <el-date-picker v-model="dialogTable.startDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>付息日</td>
          <td>
            <el-date-picker v-model="dialogTable.paymentDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>支付日</td>
          <td>
            <el-date-picker v-model="dialogTable.payDate" type="date" size="small" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>预计利率(%)</td>
          <td>
            <el-input v-model="dialogTable.rate" placeholder="请输入" size="small" type="number"></el-input>
          </td>
        </tr>
        <tr>
          <td>本金总量(元)</td>
          <td>
            <el-input v-model="dialogTable.amount" placeholder="请输入" size="small" type="number"></el-input>
          </td>
        </tr>
        <tr>
          <td>本金支付量(元)</td>
          <td>
            <el-input v-model="dialogTable.payAmount" placeholder="请输入" size="small" type="number"></el-input>
          </td>
        </tr>
        <tr>
          <td>应付利息额(元)</td>
          <td>
            <el-input v-model="dialogTable.rateAmount" placeholder="请输入" size="small" type="number"></el-input>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="dialogSure" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ModInterestpayment",
  data() {
    return {
      zqdm: '',
      zqqc: '',
      zqjc: '',
      search: "",
      tableData: [],
      urlData: '',
      dialogVisible: false,
      value1: '',
      dialogTable: {
        payIdentifying: '',
        startDate: '',
        paymentDate: '',
        payDate: '',
        rate: '',
        amount: '',
        payAmount: '',
        rateAmount: '',
      },
      currentIndex: null,
      data: '',
      guaranteeMode: '',
      bondPower: '',
    };
  },
  created () {
    this.data = this.$route.query.data; 
    this.guaranteeMode = this.$route.query.guaranteeMode;
    this.bondPower = this.$route.query.bondPower;

    // this.tableData = this.$route.query.paymentPlans;
    this.getData ();
  },
  methods: {
    getData() {
      this.axios.get('paymentPlan/selectByBondId',{params: {bondId: this.$route.query.bondId-0}})
        .then(({data})=> {
          this.tableData = data.data;
        })
    },
    // 返回按钮
    gobondDetail () {
      // this.bd.paymentPlans = this.tableData;
      this.$router.push({path: 'modifyBondDetails', 
        query: {data: this.data, guaranteeMode: this.guaranteeMode,
        bondPower: this.bondPower,
        id: this.$route.query.bondId,
      }});
    },
    del(index, item) {
      this.axios.post('paymentPlan/deleteById',{id: item.id-0})
        .then(({data})=> {
          if (data.code == 200) {
            this.$message({message: '删除成功',type: 'success'});
            this.getData();
          }
        })
    },
    // 提交下面的列表
    xiu(index, item) {
     let status = this.isEmpty(item);
      if (!status) {
        this.$message({message: '请填写完整',type: 'warning'});
      } else {
        item.bondId = this.$route.query.bondId-0;
        this.axios.post('paymentPlan/addOrUpdate', item)
          .then(({data})=> {
            console.log(data);
          })
      }
      this.currentIndex = null;
    },
    xiugai(index, item) {
      this.currentIndex = index;
      this.tempObj = JSON.stringify(item);
    },
    cancel (index, item) {
      let startItem = JSON.parse(this.tempObj)
      for (let k in item) {
        item[k] = startItem[k]
      }
      this.currentIndex = null;
    },
    lookDetail() {
      this.$router.push("opponentAccount");
    },
    xinzeng() {
      this.dialogVisible = true;
    },
    dialogSure () {
      let status = true
      let objstr = JSON.stringify(this.dialogTable);
      let obj = JSON.parse(objstr);
      for (let k in obj) {
        if (!obj[k]) {
          status = false;
        }
      }
      if (!status) {
        this.$message({message: '请您填写完整',type: 'warning'});
      } else {
        obj.bondId = this.$route.query.bondId-0;
        this.axios.post('paymentPlan/addOrUpdate', obj)
          .then (({data})=> {
            this.getData();
          })
        this.clearDialog (); 
        this.dialogVisible = false;
      }
    },
    // 清空弹窗数据
    clearDialog () {
      for (let k in this.dialogTable) {
        this.dialogTable[k] = '';
      }
    },
  }
};
</script>

<style lang="scss">
#Interestpayment {
  .homeTitle {
    &.admin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid black;
      .el-input {
        width: 300px;
      }
    }
  }
  .queryCon {
    background: white;
    padding: 0 20px 20px;
    .qSeles {
      padding-top: 20px;
      .xuanze {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        .xuanzeCon {
          height: 40px;
          display: flex;
          align-items: center;
          margin-right: 30px;
          .el-input {
            width: 200px;
          }
        }
      }
      .btnAb {
        margin-top: 30px;
        .el-button {
          margin-right: 30px;
        }
      }
    }
  }
  .table {
    margin-top: 20px;
    background: white;
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
  .dialogTable {
    width: 100%;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    tr {
      td {
        padding: 5px 10px;
        border: 1px solid #cccccc;
        text-align: center;
        .el-date-editor.el-input {
          width: 100%;
        }
      }
    }
  }
  .xbl {
    border: 1px solid white;
    width: 100%;
    border-collapse: collapse;
      tr {
        &:first-child {
          background-color: #181C1D !important;;
          color: white;
          td {
            background-color: #181C1D !important;
          }
        }
        td {
          text-align: center;
          padding: 5px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          color: white;
          background: #2C3135;
        }
    }
  }
}
</style>